import { Suspense } from 'react'
import { ToolGrid } from '@/components/tools/tool-grid'
import { SearchBar } from '@/components/search/search-bar'

interface CategoryPageProps {
  params: Promise<{
    id: string
  }>
  searchParams: Promise<{
    q?: string
  }>
}

// 暂时使用静态分类数据
const categories = [
  { id: '1', name: '开发工具', description: '编程开发相关的实用工具', icon: '💻' },
  { id: '2', name: '设计工具', description: '设计和创意相关的工具', icon: '🎨' },
  { id: '3', name: '效率工具', description: '提升工作效率的实用工具', icon: '⚡' },
  { id: '4', name: '娱乐游戏', description: '休闲娱乐和小游戏', icon: '🎮' },
  { id: '5', name: '学习教育', description: '学习和教育相关的工具', icon: '📚' },
  { id: '6', name: '生活服务', description: '日常生活实用工具', icon: '🏠' }
]

export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
  const { id } = await params
  const category = categories.find(cat => cat.id === id)

  if (!category) {
    return (
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-3xl font-bold text-gray-900 mb-4">分类不存在</h1>
            <p className="text-gray-600 mb-8">您访问的分类不存在或已被删除</p>
            <a
              href="/"
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"
            >
              返回首页
            </a>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Category Header */}
      <section className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="text-center">
            <div className="text-6xl mb-4">{category.icon}</div>
            <h1 className="text-4xl font-bold text-gray-900 mb-4">
              {category.name}
            </h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              {category.description}
            </p>
          </div>
        </div>
      </section>

      {/* Search Section */}
      <section className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="max-w-md mx-auto">
            <SearchBar />
          </div>
        </div>
      </section>

      {/* Tools Grid Section */}
      <section className="py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Suspense fallback={<ToolGridSkeleton />}>
            <ToolGrid />
          </Suspense>
        </div>
      </section>
    </div>
  )
}

// Loading skeleton component
function ToolGridSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {Array.from({ length: 8 }).map((_, i) => (
        <div key={i} className="bg-white rounded-lg shadow-sm border p-6 animate-pulse">
          <div className="aspect-video bg-gray-200 rounded-lg mb-4"></div>
          <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
          <div className="h-3 bg-gray-200 rounded w-full mb-4"></div>
          <div className="h-3 bg-gray-200 rounded w-1/2"></div>
        </div>
      ))}
    </div>
  )
}
